<template>
  <div>
    <div  class="y-nav">
       <van-nav-bar title="环境设备" left-text="返回" left-arrow @click-left="onClickLeft">
      </van-nav-bar>
    </div>
       <div class="l-bottem">
        <ve-line  class="cavs"  :data="chartData" :settings="chartSettings"></ve-line>
      </div>
       <div class="y-nput-1">
       <span class="y-text">请选择：</span>
          <el-select v-model="value" @change="inputchange(value)"  placeholder="环境">
            <el-option
               v-for="item in yinput"
                 :key="item.equipment_id"
                 :label="item.equipment_name"
                  :value="item.equipment_id"
                  >
             </el-option>
            </el-select>
        </div>
           <div class="col-right">
           <div class="y-l-1" >
              <p class="y-2-2">
                  设备编号&nbsp;:<span class="l-1">{{this.datale.weather_code}}</span>
              </p>
              <p class="y-2-2">
                  数据接收时间&nbsp;:<span class="l-1">{{this.datale.weather_receive}}</span>
              </p>
              <p class="y-2-2">
                  风速&nbsp;:<span class="l-1">{{this.datale.weather_wind}}</span>
              </p>
              <p class="y-2-2">
                  风速预警值&nbsp;:<span class="l-1">{{this.datale.weather_wind_warning}}</span>
              </p>
               <p class="y-2-2">
                 PM2.5&nbsp;:<span class="l-1">{{this.datale.weather_pmtwo}}</span>
              </p>
              <p class="y-2-2">
                  PM2.5预警值&nbsp;:<span class="l-1">{{this.datale.weather_pm_warning}}</span>
              </p>
               <p class="y-2-2">
                  次数&nbsp;:<span class="l-1">{{this.datale.weather_temperature}}</span>
              </p>
              <p class="y-2-2">
                  噪音&nbsp;:<span class="l-1">{{this.datale.weather_noise}}</span>
              </p>
              <p class="y-2-2">
                   噪音预警值&nbsp;:<span class="l-1">{{this.datale.weather_noise_warning}}</span>
              </p>
              <p class="y-2-2">
                  湿度:<span class="l-1">{{this.datale.weather_humidity}}</span>
              </p>
              <p class="y-2-2">
                   PM10&nbsp;:<span class="l-1">{{this.datale.weather_pmten}}</span>
              </p>
              <p class="y-2-2">
                  PM10预警值&nbsp;:<span class="l-1">{{this.datale.weather_pmten_warning}}</span>
              </p>
                </div>
            </div>
        </div>

</template>
<script>
import http from '../api';
export default {
  data() {
    this.chartSettings = {
      metrics: ['日期', '次数'],
      dimension: ['日期'],
    };
    return {
      char1: [],
      chartData: {
        columns: ['日期', '次数'],
        rows: [
          { 日期: '1月', 次数: 13 },
          { 日期: '2月', 次数: 35},
          { 日期: '3月', 次数: 17 },
          { 日期: '4月', 次数: 37 },
          { 日期: '5月', 次数: 45 },
          { 日期: '6月', 次数: 13 },
          { 日期: '7月', 次数: 35 },
          { 日期: '8月', 次数: 17 },
          { 日期: '9月', 次数: 37 },
          { 日期: '10月', 次数: 45 },
          { 日期: '11月', 次数: 37 },
          { 日期: '12月', 次数: 45 },
        ],
      },
       value: '',
       yinput:[],// 环境监测下拉
       // 环境监测数值
        datale:{
        weather_code:"",
        weather_receive:"",
        weather_wind:"",
        weather_wind_warning:"",
        weather_pmtwo:"",
        weather_pm_warning:"",
        weather_temperature:"",
        weather_noise:"",
        weather_noise_warning:"",
        weather_humidity:"",
        weather_pmten:"",
        weather_pmten_warning:""
        },
    };
  },
  mounted() {
    http.huanjing1chart({}).then((res) => {
      this.chart1 = res;
      for (let i = 0; i < this.chartData.rows.length; i++) {
        this.chartData.rows[i].次数 = this.chart1[i];
      }
      console.log('环境表', res);
    });
      //环境监测 下拉框
     http.hujList({}).then((r) => {
      console.log("这是",r.data)
      this.yinput=r.data;
      // console.log("环境监测", this.lshuju);
    });
  },
  methods:{
      onClickLeft() {
      this.$router.push({
          name: "主页",
        });
    },
 inputchange(value){
    console.log("z这是环境",value);
    let huanjing={};
    huanjing.equipment_id=value;
    console.log('huanjing',huanjing)
    http.ygetBuildWeatherList(huanjing).then((r) => {
          console.log("这是环境数据",r.data);
          this.datale=r.data[0];
    });
    },
  }
};
</script>
<style scoped>
/* 下拉菜单 */

.el-select >>> .el-input__inner {
  width: 100px !important;
  height: 26px;
  font-size: 12px;
  line-height: 26px;
  border: 1px solid #eee;
  padding: 5px!important;
}
 .el-select >>>.el-select__caret{
line-height: 26px!important;
}
.el-select:hover >>>.el-input__inner {
  border: 1px solid #eee!important;
}
.el-input__inner {
    padding: 5px!important;
}

 .el-tabs__item>>>.is-active{
    color:rgb(233, 243, 234)!important;
}
 .el-tabs__active-bar{
    background-color:rgb(215, 224, 216)!important;
 }
 .y-nav{
   
    height: 5rem;
    position: sticky;
    top: 0;
    background:#fff;
     z-index: 1000;
    }
 
.l-bottem {
  /* width: 38rem; */
  height: 32rem;
  /* background: indigo; */
}
.cavs{
    /* width: 38rem; */
   height: 36.1rem;
    /* background: cyan; */
}
.y-top{
    /* width: 38rem; */
    height: 6rem;
    /* float: left; */
    padding-left: 1.3rem;
    /* background: cornflowerblue; */
    position: relative;
}
.col-right{
    /* width: 38rem; */
    height: 35rem;
}
.y-l-1 {
  /* width: 20rem; */
  height: 30rem;
  /* float: left; */
  padding-left: 1.3rem;
  /* background: powderblue; */
}

.y-2-2{
    
   font-size: 1.5rem;
}
.l-1{
  padding-left: 10px;
}
.y-nput-1{
  /* width: 38rem; */
  height:2rem;  
  margin-top:2rem; 
}
.y-text{
    font-size: 1.5rem;
    padding-left: 1.3rem;
}
</style>